<template>
  <el-menu background-color="#545c64"
           text-color="#fff"
           active-text-color="#409eff"
           :collapse="collapse"
           :collapse-transition="false"
           unique-opened
           :router="true"
           :default-active="actionPath">
    <el-submenu index="1" :index="item.path" v-for="item in menuList" :key="item.id" v-if="roleName <= item.role">
      <template slot="title">
        <i :class="item.icon"></i>
        <span>{{item.title}}</span>
      </template>
      <el-menu-item :index="it.path" v-for="it in item.sList" :key="it.id" @click="savePath(it.path)">
        <template slot="title">
          <i :class="it.icon"></i>
          <span>{{it.title}}</span>
        </template>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  name: 'Aside',
  data() {
    return{
      actionPath: '/welcome',
      roleName: 0,
      menuList: [
        {
          role: 1,
          path: '1',
          icon: 'el-icon-s-tools',
          title: '超级管理员调度',
          sList:[
            {
              path: '/userList',
              icon: 'el-icon-user-solid',
              title: '用户管理',
            },
            {
              path: '/tabList',
              icon: 'el-icon-location',
              title: '商品类型管理',
            },

          ]
        },
        {
          role: 2,
          path: '2',
          icon: 'el-icon-s-tools',
          title: '管理员调度',
          sList:[
            {
              path: '/userAList',
              icon: 'el-icon-user-solid',
              title: '用户管理',
            },
            {
              path: '/shopList',
              icon: 'el-icon-location',
              title: '商品管理',
            },
            {
              path: '/collectList',
              icon: 'el-icon-shopping-cart-2',
              title: '购物车管理',
            },
            {
              path: '/orderList',
              icon: 'el-icon-sell',
              title: '订单管理',
            }
          ]
        },
        {
          role: 3,
          path: '3',
          icon: 'el-icon-s-tools',
          title: '用户调度',
          sList:[
            {
              path: '/shopYList',
              icon: 'el-icon-location',
              title: '商品管理',
            },
            {
              path: '/collectYList',
              icon: 'el-icon-shopping-cart-2',
              title: '购物车管理',
            },
            {
              path: '/orderYSList',
              icon: 'el-icon-sell',
              title: '出售商品订单管理',
            },
            {
              path: '/orderYList',
              icon: 'el-icon-sell',
              title: '购买商品订单管理',
            }
          ]
        }
      ]
    }
  },
  created() {
    this.getUser()
    this.actionPath = JSON.parse(window.sessionStorage.getItem('actionPath') || null)
  },
  methods: {
    savePath(actionPath){
      window.sessionStorage.setItem('actionPath', JSON.stringify(actionPath)) //路径存放
      this.actionPath = actionPath;
    },
    getUser() {
      let user = JSON.parse(window.sessionStorage.getItem('user') || null)
      if (user){
        this.roleName = user.role
      }
    },
  },
  computed:{
    collapse(){
      return this.$store.state.collapse;
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
